@mixin border-radius ($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

@mixin content-columns($columnCount, $columnGap: 20px) {
  -webkit-column-count: $columnCount;
  -moz-column-count: $columnCount;
  column-count: $columnCount;
  -webkit-column-gap: $columnGap;
  -moz-column-gap: $columnGap;
  column-gap: $columnGap;
}

@mixin border-image ($image) {   
  -webkit-border-image: $image;
  -moz-border-image: $image;
  -ms-border-image: $image;
  -o-border-image: $image;
  border-image: $image;
}

@mixin opacity($opacity: 100) {
  filter: alpha(opacity = $opacity);
  opacity: $opacity / 100;
}

@mixin text-shadow($x-axis: 0, $y-axis: 1px, $casting: 0, $color: white) {
  text-shadow: $x-axis $y-axis $casting $color;
}

@mixin transition($property: all, $duration: 0.5s, $function: ease-in-out, $delay: 0s) {
  -moz-transition: $property $duration $function $delay;
  -o-transition: $property $duration $function $delay;
  -webkit-transition: $property $duration $function $delay;
  transition: $property $duration $function $delay;
}

@mixin transform($property: none) {
  -webkit-transform: $property;
  -moz-transform: $property;
  -ms-transform: $property;
  -o-transform: $property;
  transform: $property;
}

@mixin transform-origin($axes: 50%) {
  -webkit-transform-origin: $axes;
  -moz-transform-origin: $axes;
  -ms-transform-origin: $axes;
  -o-transform-origin: $axes;
  transform-origin: $axes;
}

@mixin box-shadow($shadow: 0 1px 3px rgba(0, 0, 0, 0.25)) {
  -webkit-box-shadow: $shadow;
  -moz-box-shadow: $shadow;
  box-shadow: $shadow;
}

@mixin gradient($from: #111111, $to: #333333) {
  background: $from;
  /* for non-css3 browsers */
  background: -webkit-gradient(linear, left top, left bottom, from($from), to($to));
  /* for webkit browsers */
  background: -moz-linear-gradient(top, $from, $to);
  /* for firefox 3.6+ */
}

@mixin horizontal-gradient ($startColor: #555, $endColor: #333) {
  background-color: $endColor;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, right top, from($startColor), to($endColor)); // Konqueror
  background-image: -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+
  background-image: -ms-linear-gradient(left, $startColor, $endColor); // IE10
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, $startColor), color-stop(100%, $endColor)); // Safari 4+, Chrome 2+
  background-image: -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+
  background-image: -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10
  background-image: linear-gradient(left, $startColor, $endColor); // Le standard

  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff$startColor',endColorstr='#ff$endColor',GradientType=1);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
@mixin vertical-gradient ($startColor: #555, $endColor: #333) {
  background-color: $endColor;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from($startColor), to($endColor)); // Konqueror
  background-image: -moz-linear-gradient($startColor, $endColor); // FF 3.6+
  background-image: -ms-linear-gradient($startColor, $endColor); // IE10
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $startColor), color-stop(100%, $endColor)); // Safari 4+, Chrome 2+
  background-image: -webkit-linear-gradient($startColor, $endColor); // Safari 5.1+, Chrome 10+
  background-image: -o-linear-gradient($startColor, $endColor); // Opera 11.10
  background-image: linear-gradient($startColor, $endColor); // The standard

  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff$startColor',endColorstr='#ff$endColor',GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
@mixin animation($name,$duration:3s,$timing-function:linear,$delay:0,$iteration-count:1,$direction:alternate,$play-state:running){
  /* Chrome, Safari, Opera */
    -webkit-animation-name: $name;
    -webkit-animation-duration: $duration;
    -webkit-animation-timing-function: $timing-function;
    -webkit-animation-delay: $delay;
    -webkit-animation-iteration-count: $iteration-count;
    -webkit-animation-direction: $direction;
    -webkit-animation-play-state: running;
    
    /* Standard syntax */
    animation-name: $name;
    animation-duration: $duration;
    animation-timing-function: $timing-function;
    animation-delay: $delay;
    animation-iteration-count: $iteration-count;
    animation-direction: $direction;
    animation-play-state: $play-state;
}
